<template lang="">
  <div>
    <el-card class="box-card">
      <el-form :inline="true" :model="props.inquireInfo" class="demo-form-inline">
        <el-form-item :label="item.label" v-for="item in props.inquireInfo" :key="item.name">
          <el-input v-if="item.type === 'input'" clearable v-model="item.value" :placeholder="item.label"
            @keyup.enter="onSubmit" />
          <el-select v-else-if="item.type == 'select'" v-model="item.value" placeholder="选择" @change="onSubmit">
            <el-option v-for="data in item.options" :key="data.value" :label="data.label" :value="data.value" 
            />
          </el-select>
          
          <el-date-picker v-else-if="item.type == 'date'" v-model="item.value" type="datetimerange"
            start-placeholder="开始日期" end-placeholder="结束日期" placeholder="Select date and time"
            format="YYYY-MM-DD hh:mm:ss" value-format="YYYY-MM-DD hh:mm:ss" size="small" @change="onSubmit"
            />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit" v-auth="'storage:page'||'warehouse:page'">查询</el-button>
          <el-button type="primary" @click="onSubmit('reset')">重置</el-button>
          <slot></slot>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>
<script setup lang="ts">
  const props = defineProps({
    inquireInfo: {
      type: Object,
      required: true, // 必须传参
    },
  });
  // 宏来声明需要抛出的事件
  const emits = defineEmits(["getChildren"]);
  const onSubmit = (data) => {
    let info = {};
    if (data === 'reset') {

      props.inquireInfo.forEach((item) => item.value = '')
    
      
    }
    info = props.inquireInfo.reduce((list, item) => {

      if (item.value == 0) {
        list[item.key] = item.value;
      }
      else if (item.value) {
        list[item.key] = item.value;
      }
      return list;
    }, {});
    emits("getChildren", info);
  };

</script>
<style lang="scss" scoped>
  .box-card {
    margin-top: 15px;
    
  }
</style>